<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>bootstrap模态框(modal)</title>
    <script src="js/lib/jquery.min.js"></script>
    <script src="js/lib/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <!--jquery必须是1.9.0版本以上的
-->
    <script>
        $(function(){
            $("#btn2").click(function(){

                $("#show2").modal("show");
            });

        })
    </script>
</head>

<body>

<div class="container ">

    <h1 class="page-header">bootstrap模态框(modal)</h1>

    <button class="btn btn-primary" data-toggle='modal' data-target='#show'>登陆</button>

    <div class="modal fade  " id='show' >
        <div class="modal-dialog">
            <div class="modal-content">

                <button class="close" data-dismiss='modal'>×</button>
                <h1 class="modal-title">一层模态框</h1>
                <div class="modal-footer">
                    <button class="btn btn-primary" data-toggle='modal' id="btn2">再弹</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade  " id='show2'>
        <div class="modal-dialog">
            <div class="modal-content">

                <button class="close" data-dismiss='modal'>×</button>
                <h1 class="modal-title">二层模态框</h1>
                <div class="modal-body">
                    12312312
                </div>
                <div class="modal-footer">

                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
